<template>
  <div class="home-page">
    <div class="focus-btn primary" v-if="!info.isFocus && !isSelf" @click="doFocus"><i class="iconfont icon-add"></i>关注</div>
    <div class="focus-btn cancel" @click="cancelFocus" v-if="info.isFocus && !isHover && !isSelf" @mouseover="isHover = true" @mouseout="isHover = false"><i class="iconfont icon-select"></i>已关注</div>
    <div class="focus-btn cancel" @click="cancelFocus" v-if="info.isFocus && isHover && !isSelf" @mouseover="isHover = true" @mouseout="isHover = false"><i class="iconfont icon-close"></i>取消关注</div>
    <div class="header">
      <div class="avatar">
        <img :src="info.avatar" alt="" />
      </div>
      <div class="home-info">
        <div class="nick-name">{{ info.nickName }}</div>
        <ul>
          <li>
            <div class="count">{{ info.focus_count || 0 }}</div>
            <div class="describe">关注 ></div>
          </li>
          <li>
            <div class="count">{{ info.fans_count || 0 }}</div>
            <div class="describe">粉丝 ></div>
          </li>
          <li>
            <div class="count">{{ info.article_count || 0 }}</div>
            <div class="describe">文章 ></div>
          </li>
          <li>
            <div class="count">{{ info.total_words || 0 }}</div>
            <div class="describe">字数</div>
          </li>
          <li>
            <div class="count">{{ info.be_like_count || 0 }}</div>
            <div class="describe">收获喜欢</div>
          </li>
        </ul>
      </div>
    </div>
    <ul class="tab-header">
      <li class="active"><i class="iconfont icon-article"></i>文章</li>
      <li><i class="iconfont icon-iconlingdang"></i>动态</li>
      <li>关注</li>
      <li>粉丝</li>
    </ul>
    <div>
      <u-list :list="list"></u-list>
    </div>
  </div>
</template>
<script>
import uList from '../../../components/u-list/u-list.vue'
export default {
  components: { uList },
  name: 'home',
  data: () => {
    return {
      info: {},
      list: [],
      isHover: false
    }
  },
  computed: {
    isSelf () {
      /* eslint-disable-next-line */
      return this.$route.params.id == JSON.parse(this.$store.state.userInfo).id
    }
  },
  methods: {
    async doFocus () {
      const res = await this.$store.dispatch('DO_FOCUS', {
        id: Number(this.$route.params.id)
      })
      if (res.status === 200) {
        this.$message.success('关注成功！')
        this.getHomeInfo()
      }
    },
    async cancelFocus () {
      const res = await this.$store.dispatch('CANCEL_FOCUS', {
        id: Number(this.$route.params.id)
      })
      if (res.status === 200) {
        this.$message.success('已取消关注！')
        this.getHomeInfo()
      }
    },
    async getHomeInfo () {
      const res = await this.$store.dispatch('HOME_INFO', {
        id: Number(this.$route.params.id)
      })
      this.info = res.result
    },
    async getList () {
      const res = await this.$store.dispatch('article/GET_ARTICLE_LIST', {
        params: {
          author_id: Number(this.$route.params.id)
        },
        pageSize: 20,
        current: 1
      })
      if (res.status === 200) {
        this.list = res.result.list
      }
    }
  },
  created () {
    this.getHomeInfo()
    this.getList()
  }
}
</script>
<style scoped>
.home-page {
  position: relative;
}
.home-page .focus-btn {
  position: absolute;
  top: 40px;
  right: 0;
  width: 100px;
  height: 38px;
  line-height: 38px;
  text-align: center;
  font-size: 15px;
  border-radius: 19px;
  cursor: pointer;
}
.home-page .focus-btn.primary {
  background: #3db922;
  border: 1px solid #3db922;
  color: #fff;
}
.home-page .focus-btn.cancel {
  border: 1px solid hsla(0,0%,59%,.6);
  color: #8c8c8c;
}
.home-page .header {
  display: table;
  margin-top: 16px;
}
.header .avatar {
  display: table-cell;
  vertical-align: middle;
  width: 80px;
  height: 80px;
}
.header .avatar img {
  width: 80px;
  height: 80px;
  border-radius: 40px;
}
.header .home-info {
  display: table-cell;
  vertical-align: middle;
  padding-left: 20px;
}
.header .home-info .nick-name {
  font-size: 21px;
  font-weight: 700;
}
.header .home-info ul {
  margin-left: -7px;
  margin-top: 10px;
}
.header .home-info ul > li {
  display: inline-block;
  border-left: 1px solid #f0f0f0;
  padding: 3px 7px;
}
.header .home-info ul > li:first-child {
  border-left: none;
}
.header .home-info ul > li > .count {
  color: #333;
  font-size: 15px;
}
.header .home-info ul > li > .describe {
  color: #969696;
  font-size: 12px;
}

.tab-header {
  border-bottom: 2px solid #f0f0f0;
}
.tab-header li {
  display: inline-block;
  cursor: pointer;
  padding: 13px 20px;
  font-size: 15px;
  font-weight: 700;
  line-height: 25px;
  color: #969696;
  position: relative;
  box-sizing: border-box;
}
.tab-header li:hover, .tab-header li.active {
  color: #646464;
}
.tab-header li:hover:after, .tab-header li.active:after {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background: #646464;
  position: absolute;
  bottom: -2px;
  left: 0;
  z-index: 100;
}
.iconfont {
  margin-right: 5px;
}
</style>
